/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\SystemSettings\PositionTypeConfig\index.tsx
 * @Date: 2023-02-22 18:40:54
 * @LastEditTime: 2023-02-23 12:15:09
 * @LastEditors: Setsuna
 */

import React from 'react'
import {
  BaseListPage,
  columnRenders,
  http,
  IBaseListPageState,
  IBaseListPageProps,
  UdModalForm,
  validators,
  UdModal,
  https,
} from '@/lib'

import { Badge, Button, message, Select, Tag } from 'antd'
import UdSelect from '@/components/UdFormControls/UdSelect'
import apis from '@/apis/SystemSettings'
import { UdRadioGroup } from '@/components/UdFormControls'
const { Option } = Select
export default class PositionTypeConfig extends BaseListPage<IProps, IState> {
  protected useConditionsField = true
  private STATUS_ENUM: any = {
    Y: '启用',
    N: '停用',
  }
  constructor(props) {
    super(props)
    this.state = {
      title: '职位类型配置',
      queryApi: apis.getPositionTypePageList,
      positionTypeList: [],
      rowKey: 'id',
      conditions: [
        {
          label: '职位名称',
          id: 'name',
          // render: () => (
          //   <UdSelect
          //     showSearch
          //     allowClear={true}
          //     options={this.state.positionTypeList.map(item => ({ value: item.name, title: item.name }))}
          //   />
          // ),
        },
        {
          label: '职位编码',
          id: 'code',
          // render: () => (
          //   <UdSelect
          //     showSearch
          //     allowClear={true}
          //     options={this.state.positionTypeList.map(item => ({ value: item.code, title: item.code }))}
          //   />
          // ),
        },
        {
          id: 'isValid',
          label: '启用状态',
          render: () => (
            <Select placeholder="请选择状态">
              <Option value="Y">启用</Option>
              <Option value="N">停用</Option>
            </Select>
          ),
        },
      ],
      columns: [
        { title: '序号', dataIndex: 'id', key: 'id', width: 50, render: (text, reoled, index) => index + 1 },
        { title: '职位名称', dataIndex: 'name', minWidth: '130px' },
        { title: '职位编码', dataIndex: 'code', minWidth: '130px' },
        {
          title: '启用状态',
          dataIndex: 'isValid',
          key: 'isValid',
          render: (text, record) => {
            return (
              <span>
                <Badge status={text === 'Y' ? 'success' : 'error'} />
                {this.STATUS_ENUM[text]}
              </span>
            )
          },
          width: 90,
        },
        { title: '创建时间', dataIndex: 'createTime', minWidth: '100px' },
        { title: '修改时间', dataIndex: 'updateTime', minWidth: '100px' },
        {
          title: '操作',
          dataIndex: 'operate',
          width: '100px',
          render: columnRenders.operate([{ title: '编辑', action: (text, record) => this.handEditData(record) }]),
        },
      ],
      leftBtns: [
        <Button type="primary" onClick={this.handAddData}>
          新增
        </Button>,
      ],
      tableProps: {
        rowSelection: null,
      },
    }
  }

  componentDidMount(): void {
    //this.getPositionTypeLis()
    super.componentDidMount()
  }
  private getPositionTypeLis = () => {
    http.get(apis.getPositionTypeAllList).then(res => {
      let { data = [] } = res ?? {}
      this.setState({ positionTypeList: data })
    })
  }
  private handAddData = (): void => {
    UdModal.open({
      title: '新增',
      content: (
        <UdModalForm
          items={[
            { id: 'name', label: '职位名称', rules: [validators.required, validators.max(50)] },
            { id: 'code', label: '职位编码', rules: [validators.required, validators.max(50)] },
            {
              id: 'isValid',
              label: '启用状态',
              rules: [validators.required],
              initialValue: 'Y',
              render: () => (
                <UdRadioGroup
                  options={[
                    {
                      value: 'Y',
                      title: '启用',
                    },
                    {
                      value: 'N',
                      title: '禁用',
                    },
                  ]}
                />
              ),
            },
          ]}
        />
      ),
      okText: '确定',
      cancelText: '取消',
      onOk: values => {
        let params = { ...values }
        return http.post(apis.saveOrEditPostnType, params).then(res => {
          message.success('新增成功')
          this.query()
        })
      },
    })
  }
  private handEditData = (record): void => {
    UdModal.open({
      title: '编辑',
      content: (
        <UdModalForm
          values={record}
          items={[
            { id: 'name', label: '职位名称', rules: [validators.required, validators.max(50)] },
            { id: 'code', label: '职位编码', rules: [validators.required, validators.max(50)] },
            {
              id: 'isValid',
              label: '启用状态',
              rules: [validators.required],
              render: () => (
                <UdRadioGroup
                  options={[
                    {
                      value: 'Y',
                      title: '启用',
                    },
                    {
                      value: 'N',
                      title: '禁用',
                    },
                  ]}
                />
              ),
            },
          ]}
        />
      ),
      okText: '确定',
      cancelText: '取消',
      onOk: values => {
        let params = { id: record.id, ...values }
        return http.post(apis.saveOrEditPostnType, params).then(res => {
          message.success('编辑成功')
          this.query()
        })
      },
    })
  }
}
interface IState extends IBaseListPageState {
  positionTypeList: [Record<string, any>?]
}

interface IProps extends IBaseListPageProps {}
